<template>
  <div class="owe-book">
    <!-- 导航 -->
    <van-nav-bar title="我的关注" left-arrow @click-left="back()" />
    <!-- 导航栏 -->
    <div class="owe-nav">
      <span
        class="nav-item"
        :class="isLight == 0 ? 'active' : ''"
        @click="toMyFollow"
        >我的关注</span
      >
      <span
        class="nav-item"
        :class="isLight == 1 ? 'active' : ''"
        @click="toFollowMe"
        >关注我的</span
      >
    </div>
    <div class="body">
      <h4 v-show="isLight == 0">我关注了{{ userList.pagination?.totalItemCount }}个用户</h4>
      <h4 v-show="isLight == 1">{{ userList.pagination?.totalItemCount }}个用户关注了我</h4>
      <!-- contain -->
      <div class="contain" v-show="isLight == 0">
        <!-- 1 -->
        <div class="user-img" v-for="u in userList.userItems" :key="u.id">
          <img
            :src="`https://file.ituring.com.cn/SmallCover/${
              u.avatarImageKey ? u.avatarImageKey : ''
            }`"
            alt=""
          />
          <p class="user-name">{{ u.nickName }}</p>
        </div>
      </div>
      <!-- contain -->
      <div class="contain" v-show="isLight == 1">
        <!-- 2 -->
        <div class="user-img" v-for="u in userList.userItems" :key="u.id">
          <img
            :src="`https://file.ituring.com.cn/SmallCover/${
              u.avatarImageKey ? u.avatarImageKey : ''
            }`"
            alt=""
          />
          <p class="user-name">{{ u.nickName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { FollowAPI } from "@/apis";

export default {
  data() {
    return {
      // 参数
      type: "User/Attention",
      page: 1,
      // 高亮状态
      isLight: 0,
      // userList
      userList: {},
    };
  },
  mounted() {
    this.getData();
  },
  watch: {
    type() {
      console.log(this.type);
      this.getData();
    },
  },
  methods: {
    // 网络请求
    async getData() {
      // 主要网络请求
      let { data } = await this.$http(FollowAPI(this.type, this.page), {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.userList = data;
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
    // to MyFollow
    toMyFollow() {
      this.isLight = 0;
      this.type = "User/Attention";
    },
    // to FollowMe
    toFollowMe() {
      this.isLight = 1;
      this.type = "space/follows/608026";
    },
  },
};
</script>
    
<style lang="scss" scoped>
.owe-book {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 1999;
  .van-nav-bar {
    padding: 2px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  // 导航
  .owe-nav {
    padding: 65px 0 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--more-bg-white);
    .nav-item {
      margin: 0 10px;
      color: var(--more-font-grey);
      font-size: 14px;
      &.active {
        font-size: 20px;
        line-height: 26px;
        color: var(--book-name-font-black);
      }
    }
  }
  .body {
    padding: 15px;
    background-color: #fff;
    h4 {
      color: var(--book-name-font-black);
      font-size: 16px;
      line-height: 21px;
    }
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: var(--theme-blue);
        font-size: 14px;
        line-height: 20px;
      }
    }
    .contain {
      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
      .user-img {
        padding: 20px 30px 10px;
        img {
          width: 55px;
          height: 55px;
          border-radius: 55px;
        }
        .user-name {
          color: var(--more-font-grey);
          font-size: 14px;
          line-height: 20px;
          max-width: 55px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
        }
      }
    }
  }
}
</style>
  